<style lang="less">
@import "./cardList.less";
</style>
<template>
  <div class="search">
    <Card>
      <Tabs value="1">
        <TabPane label="文件/应用类" name="1">
          <div class="card-wrapper" id="image">
            <Card v-for="(item, i) in data" :key="i" class="card">
              <div class="content">
                <img
                  @click="showPic(item, i)"
                  v-if="item.type.indexOf('image')>=0"
                  class="img"
                  :src="item.url"
                />
                <div
                  v-else-if="item.type.indexOf('video')>=0"
                  class="video"
                  @click="showVideo(item)"
                >
                  <!-- 文件小于5MB显示video -->
                  <video class="cover" v-if="item.size<1024 * 1024 * 5">
                    <source :src="item.url" />
                  </video>
                  <img class="play" src="@/assets/icon/play.png" />
                </div>
                <div v-else class="other">
                  <div class="name">{{item.name}}</div>
                  <div class="key">{{item.fkey}}</div>
                  <div
                    class="info"
                  >文件类型：{{item.type}} 文件大小：{{((item.size * 1.0) / (1024 * 1024)).toFixed(2)}} MB 创建时间：{{item.createTime}}</div>
                </div>
                <div class="actions">
                  <div class="btn">
                    <Tooltip content="下载" placement="top">
                      <Icon @click="download(item)" type="md-download" size="16" />
                    </Tooltip>
                  </div>
                  <div class="btn">
                    <Tooltip content="重命名" placement="top">
                      <Icon @click="rename(item)" type="md-create" size="16" />
                    </Tooltip>
                  </div>
                  <div class="btn">
                    <Tooltip content="复制" placement="top">
                      <Icon @click="copy(item)" type="md-copy" size="16" />
                    </Tooltip>
                  </div>
                  <div class="btn-no">
                    <Tooltip content="删除" placement="top">
                      <Icon @click="remove(item)" type="md-trash" size="16" />
                    </Tooltip>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </TabPane>
        <TabPane label="项目类" name="2">
          <div class="card-wrapper">
            <Card @click="showProject(item)" v-for="(item, i) in data2" :key="i" class="card">
              <div class="project">
                <img class="img" :src="item.url" />
                <div class="content">
                  <div class="title">{{item.title}}</div>
                  <div class="desc">{{item.description}}</div>
                  <div class="info">
                    <div class="time">
                      <Time :time="new Date()" :interval="1" />
                    </div>
                    <div class="avatar">
                      <div v-for="(iitem, i) in item.author" :key="i" class="item">
                        <Tooltip :content="iitem.name" placement="top">
                          <Avatar :src="iitem.avatar" size="small" class="c" />
                        </Tooltip>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </TabPane>
      </Tabs>
    </Card>

    <Modal
      v-model="videoVisible"
      :title="videoTitle"
      :width="800"
      @on-cancel="closeVideo"
      draggable
    >
      <div id="dplayer-card" style="height: 500px"></div>
      <div slot="footer">
        <span>文件类型：{{file.type}} 文件大小：{{file.msize}} 创建时间：{{file.createTime}}</span>
      </div>
    </Modal>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";
import DPlayer from "dplayer";
export default {
  name: "card-list",
  data() {
    return {
      dp: null,
      videoVisible: false,
      picTitle: "",
      videoTitle: "",
      file: {},
      data: [
        {
          url:
            "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
          name: "XBoot",
          type: "image",
          fkey: "XBoot 是很不错的Web前后端分离架构开发平台",
          size: 28659,
          createTime: "2018-10-22"
        },
        {
          url:
            "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
          name: "Exrick",
          type: "image",
          fkey: "XBoot 是很不错的Web前后端分离架构开发平台",
          size: 18659,
          createTime: "2018-10-22"
        },
        {
          url:
            "https://cloud.video.taobao.com//play/u/95292294/p/1/e/6/t/1/210877258798.mp4",
          name: "视频",
          type: "video",
          fkey: "XBoot 是很不错的Web前后端分离架构开发平台",
          size: 8659,
          createTime: "2018-10-22"
        },
        {
          url:
            "https://icarusion.gitee.io/iview/e1cf12c07bf6458992569e67927d767e.png",
          name: "XBoot",
          type: "txt",
          fkey: "XBoot 是很不错的Web前后端分离架构开发平台",
          size: 8659,
          createTime: "2018-10-22"
        }
      ],
      data2: [
        {
          url:
            "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
          title: "XBoot",
          description: "XBoot 是很不错的Web前后端分离架构开发平台",
          author: [
            {
              name: "XBoot",
              avatar: "https://s1.ax1x.com/2018/05/19/CcdVQP.png"
            },
            {
              name: "Exrick",
              avatar: "https://ooo.0o0.ooo/2021/01/16/VuODA1yUSCeXzFM.png"
            }
          ],
          createTime: "2018-10-22"
        },
        {
          url:
            "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
          title: "Exrick",
          description: "XBoot 是很不错的Web前后端分离架构开发平台",
          author: [
            {
              name: "XBoot",
              avatar: "https://s1.ax1x.com/2018/05/19/CcdVQP.png"
            },
            {
              name: "Exrick",
              avatar: "https://ooo.0o0.ooo/2021/01/16/VuODA1yUSCeXzFM.png"
            }
          ],
          createTime: "2018-10-22"
        }
      ]
    };
  },
  methods: {
    init() {},
    showPic(v, i) {
      let viewer = new Viewer(document.getElementById("image"), {
        hidden: function() {
          viewer.destroy();
        }
      });
      viewer.view(i);
    },
    showVideo(v) {
      this.dp = new DPlayer({
        container: document.getElementById("dplayer-card"),
        screenshot: true,
        video: {
          url: v.url
        }
      });
      this.file = v;
      this.file.msize = ((v.size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
      this.videoTitle = v.name + "(" + v.fkey + ")";
      this.videoVisible = true;
    },
    closeVideo() {
      this.dp.destroy();
    },
    download(v) {
      window.open(
        v.url + "?attname=&response-content-type=application/octet-stream"
      );
    },
    copy(v) {
      this.$Message.info("点击了 " + v.name + " 的复制图标");
    },
    remove(v) {
      this.$Message.info("点击了 " + v.name + " 的删除图标");
    },
    rename(v) {
      this.$Message.info("点击了 " + v.name + " 的重命名图标");
    }
  },
  mounted() {
    this.init();
  }
};
</script>